<template>
  <div class="Composite">
    <CompositeFrom ref="form" @submit="submit" />
    <div class="Composite-con1" v-if="con1Display">
      <div>
        <AlarmInf :countMap="countMap" @clickEvent="clickEvent" />
      </div>
      <div>
        <Statistical :countNum="countNum" />
      </div>
    </div>
    <div class="Composite-con2" :style="{height:con2Height}">
      <Deitle ref="deitle" @search="fetchAlarmList" @fqqx="fqqx" @changeHeight="changeHeight" :con1Display='con1Display' />
    </div>
    <!-- <el-dialog title="缺陷登记" top="20vh" :visible.sync="showQxdj" width="65%">
      <Qxdj v-if="showQxdj" @close='close' />
    </el-dialog>-->
    <el-dialog title="缺陷登记" top="20vh" :visible.sync="showQxdj" width="65%">
      <addlistmodules :tableSelect="tableSelect" @close="addlistClose" v-if="showQxdj" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import addlistmodules from "../../../JointInspection/modules/DefectManagement/modules/addlistmodules.vue";
import lodash from "lodash";
import {
  CompositeFrom,
  AlarmInf,
  Deitle,
  Statistical,
  Qxdj,
} from "../components";

@Component({
  components: {
    CompositeFrom,
    AlarmInf,
    Deitle,
    Statistical,
    Qxdj,
    addlistmodules,
  },
})
export default class Composite extends Vue {
  showQxdj: boolean = false;
  $refs!: {
    form: CompositeFrom;
    deitle: Deitle;
  };
  // mounted() {
  //   this.fetchAlarmList();
  // }
  // 发起缺陷
  tableSelect = [];
  fqqx(row) {
    this.tableSelect = row;
    console.log(row);
    if (row[0].PMSID) {
      this.showQxdj = true;
    } else {
      this.$message({
        type: "warning",
        message: `此数据无法发起缺陷`,
      });
    }
  }
  clickEvent(item) {
    if (item.type === "qt") {
      this.$message({
        type: "warning",
        message: "其他类型暂未统计",
      });
      return false;
    }
    let form = this.$refs.form;
    let formData: any = lodash.clone(form.formData);
    formData.source = item.type;
    form.resetFormData(formData);
    this.submit();
  }
  submit() {
    let deitle = this.$refs.deitle;
    deitle.pages.page = 1;
    this.fetchAlarmList();
    this.fetchCount();
  }
  countNum = [];
  countMap = {};
  fetchCount() {
    let form = this.$refs.form;
    let params = {
      station: form.formData.station,
      gjdj: form.formData.gjdj,
      gjly: form.formData.source,
      clzt: form.formData.clzt,
      gjnr: form.formData.alarm,
      gjsj: form.formData.time,
      sbmc: form.formData.name,
    };
    (this as any).$services
      .getCount({ data: params })
      .then((result: any) => {
        result = result || {};
        let { countNum, countMap } = result.data || {};
        countNum = countNum || [];
        countNum = countNum.reverse();
        this.countNum = countNum;
        this.countMap = countMap;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  fetchAlarmList() {
    let form = this.$refs.form;
    let deitle = this.$refs.deitle;
    let params = {
      station: form.formData.station,
      gjdj: form.formData.gjdj,
      gjly: form.formData.source,
      clzt: form.formData.clzt,
      gjnr: form.formData.alarm,
      gjsj: form.formData.time,
      page: deitle.pages.page,
      sbmc: form.formData.name,
      size: deitle.pages.pageSize,
    };
    deitle.queryIntegrageAlarmList(params);
  }
  addlistClose() {
    this.showQxdj = false;
  }
  con1Display = true;
  con2Height: any = "calc(50% - 0.4rem)";
  changeHeight() {
    // console.log(1);
    // console.log(1);
    this.con1Display = !this.con1Display;
    if (this.con1Display) {
      this.con2Height = "calc(50% - 0.4rem)";
    } else {
      this.con2Height = "calc(100% - 0.4rem)";
    }
  }
}
</script>

<style lang="scss" scoped>
.Composite {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .Composite-con1 {
    height: calc(50% - 0.4rem);
    display: flex;
    justify-content: space-between;
    > div {
      width: 49.5%;
    }
  }
  .Composite-con2 {
    height: calc(50% - 0.4rem);
    // height: calc(100% - 0.4rem);
  }
}
</style>

